<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>文本溢出</title>

        <style type="text/css">
            .wrapper { width: 200px ; height: 100px ; border: 1px solid blue ; margin: 15px auto ; }
            .first { background-color: #ff0 ; }

            .third { 
                height: 20px ; 
                line-height: 20px ; 
                /* white-space 取值为 nowrap 时 表示文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/
                white-space: nowrap; 
            }

            .fourth {
                height: 20px ; 
                line-height: 20px ; 
                white-space: nowrap ; 
                overflow: hidden ; /* overflow 为 hidden 表示元素内部的内容超出边界后一律裁剪 */
                text-overflow: ellipsis ; /* ellipsis 显示省略符号来代表被修剪的文本 */
            }

            .fourth:hover {
                overflow: visible ; /* overflow 为 visible 则表示元素内部的内容超出边界后仍然显示 */
                text-overflow: inherit ;
            }

            p { text-align: center ; color: red ; }

            .fifth {
                height: 60px ;
                overflow: hidden ; /* overflow 为 hidden 表示元素内部的内容超出边界后一律裁剪 */
                text-overflow: ellipsis ; /* ellipsis 显示省略符号来代表被修剪的文本 */
            }
        </style>

    </head>
    <body>

        <!-- 文本遇到元素边界时会自动换行 -->
        <div class="wrapper first">
            The universal selector is a special type selector, that represents an element of any element type.
        </div>

        <!-- 使用强制不换行标记让文本在同一行显示-->
        <div class="wrapper second">
            <nobr>
                The universal selector is a special type selector, that represents an element of any element type.
            </nobr>
        </div>

        <!-- 使用 white-space 实现 文本不换行效果-->
        <div class="wrapper third">
            The universal selector is a special type selector, that represents an element of any element type.
        </div>

        <div class="wrapper fourth">
            The universal selector is a special type selector, that represents an element of any element type.
        </div>

        <p>
            【作业】对于下面的DIV来说，如何在裁剪其中文本后，在末尾显示 三个点
        </p>
        <div class="wrapper fifth">
            The universal selector is a special type selector, that represents an element of any element type.
        </div>
        
    </body>
</html>